<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.ico">
  <title>壹脉智能CRM</title>
  <link rel="stylesheet" href="css/iview.min.css">
  <link href="./css/bootstrap.min.css" rel="stylesheet">
  <link href="./css/perfect-scrollbar.min.css" rel="stylesheet">
  <link href="css/style.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/daterangepicker.css">
  <link href="css/colors/default.css" id="theme" rel="stylesheet">
  <link rel="stylesheet" href="css/diy.css">
  <!-- page css -->
  <link href="css/pages/user-card.css" rel="stylesheet">
  <!-- Popup CSS -->
  <link href="css/magnific-popup.css" rel="stylesheet">
</head>

<body class="fix-header fix-sidebar card-no-border">
  <div class="preloader">
    <div class="loader">
      <div class="loader__figure"></div>
      <p class="loader__label">壹脉</p>
    </div>
  </div>
  <div id="main-wrapper">
    <header class="topbar">
      <nav class="navbar top-navbar navbar-expand-md navbar-light">
        <div class="navbar-header">
          <a class="navbar-brand" href="../index.html">
            <b>
              <img src="../assets/images/diy/yimai.png" alt="homepage" class="dark-logo" />
              <!--<img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo"/>-->
            </b>
            <span>
              <span class="fs18 cblue p-l-6 fbold">壹脉智能CRM</span>
            </span>
          </a>
        </div>
        <div class="navbar-collapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item"><a class="nav-link nav-toggler hidden-md-up waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a></li>
            <li class="nav-item"><a class="nav-link sidebartoggler hidden-sm-down waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a></li>
          </ul>
          <user-head></user-head>
        </div>
      </nav>
    </header>
    <aside class="left-sidebar">
      <div class="scroll-sidebar">
        <company-position></company-position>
        <nav class="sidebar-nav p-0">
          <c-slider current="5"></c-slider>
        </nav>
      </div>
    </aside>
    <div class="page-wrapper">
      <div class="container-fluid">
        <div class="row page-titles">
          <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">拼团配置</h3>
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="javascript:void(0)">HOME</a></li>
              <li class="breadcrumb-item">营销活动</li>
              <li class="breadcrumb-item">拼团</li>
              <li class="breadcrumb-item">拼团商品列表</li>
              <li class="breadcrumb-item active">拼团配置</li>
            </ol>
          </div>
        </div>
        <div class="bgfff p-l-29 p-r-31 p-t-29 p-b-50">
          <div class="row assemble-form">
            <div class="col-xl-12 form-item">
              <span>活动时长：</span>
              <!-- <input type="text" class="form-control p-l-23 phgray bgfff w300" id="time" style="max-width: 400px; width: 400px!important;"> -->
              <Date-picker type="datetimerange"
              format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择相应的活动时长"
               id="date-picker" @on-change="dateChange">
              </Date-picker>
            </div>
            <div class="col-xl-4 col-lg-6 form-item">
              <span>成团人数：</span>
              <span>{{listData.peopleNum}}</span>
              <span class="m-l-10">拼团人数>1</span>
            </div>
            <div class="col-xl-8 col-lg-6 form-item">
              <span class="m-r-10">单账号最多可开团数：</span>
              <span>{{listData.openRegiment}}</span>
            </div>
            <div class="col-xl-4 col-lg-6 form-item">
              <span>单账号最多可购买数：</span>
              <span>{{listData.maxPurchase}}</span>
            </div>
            <div class="col-xl-8 col-lg-6 form-item">
              <span>单账号最多可参团数：</span>
              <span>{{listData.joinRegiment}}</span>
            </div>
          </div>
          <div class="disflex align-cen mt-5">
            <span>拼团商品</span>
          </div>
          <table class="align-cen-table m-t-20 textc display nowrap table table-hover table-bordered bgf6f9fa m-b-20">
            <thead>
              <tr>
                <th>商品ID</th>
                <th class="w20p">商品</th>
                <th>分类</th>
                <th>价格</th>
                <th>库存</th>
                <th>总销量</th>
                <th>发布时间</th>
              </tr>
            </thead>
            <tbody class="bgfff">
              <tr class="curpointer">
                <td>{{listData.goodsId}}</td>
                <td class="w20p">{{listData.goodsName}}</td>
                <td>{{listData.goodsTypeName}}</td>
                <td>{{((listData.minPrice || 0) /100).toFixed(2)}}</td>
                <td>{{listData.goodsNum}}</td>
                <td>{{listData.totalBuyNum}}</td>
                <td>{{listData.assembleTime | formatDate('yyyy/MM/dd hh:mm')}}</td>
              </tr>
            </tbody>
          </table>
          <div class="">
            <span>商品规格</span>
          </div>
          <table class="align-cen-table m-t-20 textc display nowrap table table-hover table-bordered bgf6f9fa m-b-20">
            <thead>
              <tr>
                <th>商品名称</th>
                <th>商品类型</th>
                <th>商品规格</th>
                <th>商品库存</th>
                <th>商品价格</th>
                <th>拼团金额</th>
                <th>活动库存</th>
              </tr>
            </thead>
            <tbody class="bgfff">
              <tr class="curpointer" v-for="(spec, index) in listDataArr">
                <td>{{spec.specName}}</td>
                <td>{{spec.typeName}}</td>
                <td>{{spec.specAttribute}}</td>
                <td>{{spec.specNum}}</td>
                <td>{{spec.price | formatMoney}}</td>
                <td>{{spec.assemblePrice | formatMoney}}</td>
                <td>{{spec.assembleNum}}</td>
              </tr>
            </tbody>
          </table>
          <div class="d-flex lh40 jscen m-t-30">
            <!--
            <span class="bgblue dis-inline-block cfff hoverfff w100 textc h40 bradius4 m-r-20" @click="save(0)">保存到草稿箱</span> -->
            <span class="bblue dis-inline-block cblue hoverfff w85 textc h40 bradius4" @click="save">保存编辑</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/perfect-scrollbar.jquery.min.js"></script>
  <script src="js/sidebarmenu.js"></script>
  <script src="js/custom.min.js"></script>
  <script src="js/vue.js"></script>
  <script src="js/iview.js"></script>
  <script src="js/layer/layer.js"></script>
  <script src="js/moment.js"></script>
  <script src="js/daterangepicker.js"></script>
  <script src="js/config.js"></script><script src="js/extend.js"></script>
  <script>
  $(function() {
    window.vw = new Vue({
      el: '#main-wrapper',
      data: {
        listData: {},
        endDate: '',
        startDate: '',
        listDataArr: []
      },
      mounted() {
        try {
          this.assembleId = $.formatParams(location.href).assembleId
          $.cAjax('/crmPc/assemble/updateGoodsAssembleInfo', {
            data: {
              assembleId: this.assembleId
            }
          }).then(res => {
            this.listData = res
            this.startDate = res.startTime
            this.endDate = res.endTime
            this.listDataArr = res.goodSpecModelList[0].goodSpecModelList.map(item => {
              return {
                specName: res.goodSpecModelList[0].specName,
                typeName: res.goodSpecModelList[0].typeName,
                ...item
              }
            })
            this.dateSelect(res.startTime, res.endTime)
          })
        } catch (e) {
          console.log(e)
        }


      },
      methods: {
        dateChange(date) {
          this.startDate  = date[0]
          this.endDate =  date[1]
        },
        save() {
          $.cAjax('/crmPc/assemble/insertGoodsAssemble', {
            data: {
              startTimes: this.startDate,
              endTimes: this.endDate,
              goodsId: this.listData.goodsId,
              assembleId: this.listData.assembleId,
              updateType: 1,
              assembleType: 0
            }
          }).then(res => {
            layer.msg('保存编辑成功');
            setTimeout(function() {
              history.back();
            }, 1.5 * 1000);
          })
        },
        dateSelect(start, end) {
          $('#time').daterangepicker({
            startDate: start,
            endDate: end,
            timePicker: true,
            timePickerIncrement: 1,
            timePicker24Hour: true,
            timePickerSeconds: true,
            locale: {
              format: 'YYYY-MM-DD hh:mm:ss',
              separator: ' 到 ',
              applyLabel: '确定',
              cancelLabel: '取消',
              weekLabel: 'W',
              customRangeLabel: 'Custom Range',
              daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
              monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            }
          }).on('apply.daterangepicker', (ev, picker) => {
            this.startDate = picker.startDate.format('YYYY-MM-DD hh:mm:ss');
            this.endDate = picker.endDate.format('YYYY-MM-DD hh:mm:ss');
          });
        }
      }
    })
  })
  </script>
</body>

</html>
